// webpack.config.js
const path = require('path');
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成动态title
const {CleanWebpackPlugin} = require('clean-webpack-plugin') // 每次打包前清除dist文件,重新生成
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); // 命令行提示
const DefinePlugin = require("webpack/lib/DefinePlugin")
const CopyWebpackPlugin = require('copy-webpack-plugin');

const envConfig = require('./config/api')
const API_URL = envConfig[process.env.NODE_ENV]

module.exports = {
  mode: 'development',
  // target: 'web',
  entry: {
    index: './src/index.tsx',
    // vendor: ['react'] // 这里是依赖的库文件配置，和CommonsChunkPlugin配合使用可以单独打包
  },
  devServer: { // 开发环境热更新
    historyApiFallback: true, // 路由匹配,没有找到路由就显示入口文件
    contentBase: path.join(__dirname, './dist'),
    open: true,
    // noInfo: true,
    hot: true,
    // quiet: true, // 避免不必要的信息打印在控制台
    port: 8082, // 端口号
    // inline: true, // 实时刷新
    // liveReload: false, // 重新加载/刷新页面
    // publicPath: '/', // 公共路径 打包后资源可以访问的路径
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '写着玩',
      template: path.resolve(__dirname, './public/index.html'),
      filename: 'index.html',
    }),
    new CleanWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),  // 热更新插件
    new ProgressBarPlugin(),
    new DefinePlugin({
      /* eslint-disable no-undef */
      SOMETHINE: 'This is something we needed.',
      API_URL: JSON.stringify(API_URL)
    }),
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, "./public"), //打包的静态资源目录地址
        to: path.resolve(__dirname, "./dist/public") //打包到build下面的public
      }]
    }),
  ],
  module: { // 引入 babel, 进行文件的转换编译,其中包括: js css 静态资源 es6转义为浏览器可编译文件(bable-cro) 
    rules: [
      // JavaScript
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      // tsx 配置
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
       // Images
       {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
      // Fonts and SVGs
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline',
      },
      // CSS, PostCSS, and Sass
      {
        test: /\.(css)$/,
        use: ['style-loader', {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          }, 'postcss-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          // MiniCssExtractPlugin.loader,
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ],
  },
  devtool: 'inline-source-map', // 追踪代码和给出错误代码出现的地方的提示
  // babel: {
  //   presets: ['es2015', 'stage-0', 'react'],
  //   plugins: ['transform-runtime', ['import', {
  //     libraryName: 'antd',
  //     style: 'css'
  //   }]]
  // },
  resolve:{
    alias: {
      '@': path.resolve(__dirname, './src'),
      'config': path.resolve(__dirname, './config'),
    },
    extensions: [ '.tsx', '.ts', '.js', '.jsx' ]
  }
}